<template>
    <div class="notifications-container fade-in">
        <div class="page-header">
            <div class="header-content">
                <div class="title-section">
                    <h2 class="page-title">
                        <el-icon class="title-icon">
                            <Bell />
                        </el-icon>
                        通知公告管理
                    </h2>
                    <p class="page-subtitle">管理系统通知和重要公告信息</p>
                </div>
                <el-button type="primary" class="add-button" @click="showAddDialog = true">
                    <el-icon>
                        <Plus />
                    </el-icon>
                    发布公告
                </el-button>
            </div>
        </div>

        <div class="stats-cards">
            <el-card class="stat-card">
                <div class="stat-content">
                    <div class="stat-icon total">
                        <el-icon><Bell /></el-icon>
                    </div>
                    <div class="stat-info">
                        <div class="stat-number">{{ notifications.length }}</div>
                        <div class="stat-label">总公告数</div>
                    </div>
                </div>
            </el-card>
            <el-card class="stat-card">
                <div class="stat-content">
                    <div class="stat-icon important">
                        <el-icon><Warning /></el-icon>
                    </div>
                    <div class="stat-info">
                        <div class="stat-number">{{ importantCount }}</div>
                        <div class="stat-label">重要公告</div>
                    </div>
                </div>
            </el-card>
            <el-card class="stat-card">
                <div class="stat-content">
                    <div class="stat-icon active">
                        <el-icon><CircleCheck /></el-icon>
                    </div>
                    <div class="stat-info">
                        <div class="stat-number">{{ activeCount }}</div>
                        <div class="stat-label">已发布</div>
                    </div>
                </div>
            </el-card>
            <el-card class="stat-card">
                <div class="stat-content">
                    <div class="stat-icon draft">
                        <el-icon><Edit /></el-icon>
                    </div>
                    <div class="stat-info">
                        <div class="stat-number">{{ draftCount }}</div>
                        <div class="stat-label">草稿</div>
                    </div>
                </div>
            </el-card>
        </div>

        <el-card class="table-card">
            <template #header>
                <div class="card-header">
                    <span>公告列表</span>
                    <div class="header-actions">
                        <el-input
                            v-model="searchQuery"
                            placeholder="搜索公告标题或内容"
                            class="search-input"
                            clearable
                            prefix-icon="Search"
                        />
                        <el-select v-model="statusFilter" placeholder="状态筛选" clearable class="status-filter">
                            <el-option label="全部" value="" />
                            <el-option label="已发布" value="已发布" />
                            <el-option label="草稿" value="草稿" />
                            <el-option label="已过期" value="已过期" />
                        </el-select>
                        <el-select v-model="typeFilter" placeholder="类型筛选" clearable class="type-filter">
                            <el-option label="全部" value="" />
                            <el-option label="重要公告" value="重要公告" />
                            <el-option label="一般通知" value="一般通知" />
                            <el-option label="活动通知" value="活动通知" />
                        </el-select>
                    </div>
                </div>
            </template>
            
            <el-table 
                :data="filteredNotifications" 
                style="width: 100%" 
                :stripe="true" 
                :border="false"
                class="notifications-table"
                v-loading="loading">
                <el-table-column prop="title" label="公告标题" min-width="200">
                    <template #default="{ row }">
                        <div class="title-cell">
                            <el-icon class="notification-icon" :class="{ important: row.type === '重要公告' }">
                                <Bell />
                            </el-icon>
                            <div class="title-content">
                                <span class="title-text">{{ row.title }}</span>
                                <el-tag v-if="row.type === '重要公告'" type="danger" size="small" class="important-tag">
                                    重要
                                </el-tag>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="type" label="类型" min-width="100">
                    <template #default="{ row }">
                        <el-tag :type="getTypeColor(row.type)" effect="light" class="type-tag">
                            {{ row.type }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="author" label="发布人" min-width="100">
                    <template #default="{ row }">
                        <span class="author-text">{{ row.author }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="publishDate" label="发布时间" min-width="120">
                    <template #default="{ row }">
                        <span class="date-text">{{ formatDate(row.publishDate) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="expireDate" label="过期时间" min-width="120">
                    <template #default="{ row }">
                        <span class="date-text">{{ formatDate(row.expireDate) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" min-width="100">
                    <template #default="{ row }">
                        <el-tag 
                            :type="getStatusColor(row.status)" 
                            effect="light"
                            class="status-tag">
                            <el-icon class="status-icon">
                                <CircleCheck v-if="row.status === '已发布'" />
                                <Edit v-else-if="row.status === '草稿'" />
                                <Close v-else />
                            </el-icon>
                            {{ row.status }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="views" label="阅读量" min-width="100">
                    <template #default="{ row }">
                        <span class="views-count">{{ row.views || 0 }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="250" fixed="right">
                    <template #default="{ row }">
                        <div class="action-buttons">
                                                         <el-button type="primary" size="small" @click="editNotificationHandler(row)" class="action-btn">
                                <el-icon><Edit /></el-icon>
                                编辑
                            </el-button>
                            <el-button type="success" size="small" @click="viewNotification(row)" class="action-btn">
                                <el-icon><View /></el-icon>
                                查看
                            </el-button>
                            <el-button 
                                v-if="row.status === '草稿'" 
                                type="warning" 
                                size="small" 
                                @click="publishNotification(row)" 
                                class="action-btn">
                                <el-icon><Upload /></el-icon>
                                发布
                            </el-button>
                            <el-button type="danger" size="small" @click="deleteNotification(row)" class="action-btn">
                                <el-icon><Delete /></el-icon>
                                删除
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <!-- 添加公告对话框 -->
        <el-dialog 
            v-model="showAddDialog" 
            title="发布公告" 
            width="800px" 
            class="add-dialog"
            :close-on-click-modal="false">
            <el-form :model="newNotification" :rules="formRules" ref="formRef" label-width="100px" class="notification-form">
                <el-row :gutter="20">
                    <el-col :span="16">
                        <el-form-item label="公告标题" prop="title">
                            <el-input v-model="newNotification.title" placeholder="请输入公告标题" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="公告类型" prop="type">
                            <el-select v-model="newNotification.type" placeholder="请选择类型" style="width: 100%">
                                <el-option label="重要公告" value="重要公告" />
                                <el-option label="一般通知" value="一般通知" />
                                <el-option label="活动通知" value="活动通知" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="发布人" prop="author">
                            <el-input v-model="newNotification.author" placeholder="请输入发布人" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="过期时间" prop="expireDate">
                            <el-date-picker 
                                v-model="newNotification.expireDate" 
                                type="datetime" 
                                placeholder="选择过期时间" 
                                style="width: 100%" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="公告内容" prop="content">
                    <el-input 
                        v-model="newNotification.content" 
                        type="textarea" 
                        :rows="8"
                        placeholder="请输入公告内容" />
                </el-form-item>
                <el-form-item label="附件">
                    <el-upload
                        action="#"
                        :auto-upload="false"
                        :on-change="handleFileChange"
                        multiple>
                        <el-button type="primary">
                            <el-icon><Upload /></el-icon>
                            选择文件
                        </el-button>
                        <template #tip>
                            <div class="el-upload__tip">
                                支持jpg/png/pdf/doc/docx文件，单个文件不超过10MB
                            </div>
                        </template>
                    </el-upload>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="saveAsDraft">保存草稿</el-button>
                    <el-button @click="showAddDialog = false">取消</el-button>
                    <el-button type="primary" @click="addNotification" :loading="submitting">立即发布</el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 编辑公告对话框 -->
        <el-dialog 
            v-model="showEditDialog" 
            title="编辑公告" 
            width="800px" 
            class="edit-dialog"
            :close-on-click-modal="false">
            <el-form :model="editNotification" :rules="formRules" ref="editFormRef" label-width="100px" class="notification-form">
                <el-row :gutter="20">
                    <el-col :span="16">
                        <el-form-item label="公告标题" prop="title">
                            <el-input v-model="editNotification.title" placeholder="请输入公告标题" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="公告类型" prop="type">
                            <el-select v-model="editNotification.type" placeholder="请选择类型" style="width: 100%">
                                <el-option label="重要公告" value="重要公告" />
                                <el-option label="一般通知" value="一般通知" />
                                <el-option label="活动通知" value="活动通知" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="发布人" prop="author">
                            <el-input v-model="editNotification.author" placeholder="请输入发布人" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="过期时间" prop="expireDate">
                            <el-date-picker 
                                v-model="editNotification.expireDate" 
                                type="datetime" 
                                placeholder="选择过期时间" 
                                style="width: 100%" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="公告内容" prop="content">
                    <el-input 
                        v-model="editNotification.content" 
                        type="textarea" 
                        :rows="8"
                        placeholder="请输入公告内容" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="showEditDialog = false">取消</el-button>
                    <el-button type="primary" @click="updateNotification" :loading="submitting">保存修改</el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 查看公告对话框 -->
        <el-dialog 
            v-model="showViewDialog" 
            title="公告详情" 
            width="700px" 
            class="view-dialog">
            <div v-if="viewNotificationData" class="notification-detail">
                <div class="detail-header">
                    <h3 class="detail-title">{{ viewNotificationData.title }}</h3>
                    <div class="detail-meta">
                        <el-tag :type="getTypeColor(viewNotificationData.type)" size="small">
                            {{ viewNotificationData.type }}
                        </el-tag>
                        <span class="meta-text">发布人：{{ viewNotificationData.author }}</span>
                        <span class="meta-text">发布时间：{{ formatDate(viewNotificationData.publishDate) }}</span>
                        <span class="meta-text">阅读量：{{ viewNotificationData.views || 0 }}</span>
                    </div>
                </div>
                <div class="detail-content">
                    <p>{{ viewNotificationData.content }}</p>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { Plus, Bell, Warning, CircleCheck, Edit, Search, Delete, View, Close, Upload } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 模拟数据
const notifications = ref([
    {
        id: 1,
        title: '关于2024年蓝桥杯程序设计大赛报名的通知',
        type: '重要公告',
        author: '系统管理员',
        content: '2024年蓝桥杯程序设计大赛报名工作即将开始，请各位同学及时关注报名时间和相关要求。',
        publishDate: '2024-01-15 10:00:00',
        expireDate: '2024-12-31 23:59:59',
        status: '已发布',
        views: 156
    },
    {
        id: 2,
        title: '传智杯算法竞赛获奖名单公示',
        type: '一般通知',
        author: '竞赛组委会',
        content: '经过激烈角逐，传智杯算法竞赛获奖名单已确定，现予以公示。',
        publishDate: '2024-01-10 14:30:00',
        expireDate: '2024-02-10 23:59:59',
        status: '已发布',
        views: 89
    },
    {
        id: 3,
        title: '2024年春季学期竞赛活动安排',
        type: '活动通知',
        author: '教务处',
        content: '2024年春季学期将举办多项学科竞赛活动，具体安排如下...',
        publishDate: '2024-01-05 09:00:00',
        expireDate: '2024-06-30 23:59:59',
        status: '已发布',
        views: 234
    },
    {
        id: 4,
        title: '系统维护通知',
        type: '重要公告',
        author: '技术部',
        content: '系统将于本周六凌晨2:00-4:00进行维护升级，期间可能影响正常使用。',
        publishDate: null,
        expireDate: '2024-12-31 23:59:59',
        status: '草稿',
        views: 0
    }
])

const loading = ref(false)
const submitting = ref(false)
const searchQuery = ref('')
const statusFilter = ref('')
const typeFilter = ref('')
const formRef = ref(null)
const editFormRef = ref(null)

const showAddDialog = ref(false)
const showEditDialog = ref(false)
const showViewDialog = ref(false)
const viewNotificationData = ref(null)

const newNotification = ref({
    title: '',
    type: '一般通知',
    author: '',
    content: '',
    expireDate: ''
})

const editNotification = ref({
    id: null,
    title: '',
    type: '',
    author: '',
    content: '',
    expireDate: ''
})

// 表单验证规则
const formRules = {
    title: [
        { required: true, message: '请输入公告标题', trigger: 'blur' },
        { min: 2, max: 100, message: '标题长度在2到100个字符之间', trigger: 'blur' }
    ],
    type: [
        { required: true, message: '请选择公告类型', trigger: 'change' }
    ],
    author: [
        { required: true, message: '请输入发布人', trigger: 'blur' }
    ],
    content: [
        { required: true, message: '请输入公告内容', trigger: 'blur' }
    ],
    expireDate: [
        { required: true, message: '请选择过期时间', trigger: 'change' }
    ]
}

// 统计数据
const importantCount = computed(() => notifications.value.filter(n => n.type === '重要公告').length)
const activeCount = computed(() => notifications.value.filter(n => n.status === '已发布').length)
const draftCount = computed(() => notifications.value.filter(n => n.status === '草稿').length)

// 过滤数据
const filteredNotifications = computed(() => {
    let filtered = notifications.value
    
    if (searchQuery.value) {
        const query = searchQuery.value.toLowerCase()
        filtered = filtered.filter(n => 
            n.title.toLowerCase().includes(query) || 
            n.content.toLowerCase().includes(query)
        )
    }
    
    if (statusFilter.value) {
        filtered = filtered.filter(n => n.status === statusFilter.value)
    }
    
    if (typeFilter.value) {
        filtered = filtered.filter(n => n.type === typeFilter.value)
    }
    
    return filtered
})

// 格式化日期
const formatDate = (date) => {
    if (!date) return '-'
    return new Date(date).toLocaleString('zh-CN')
}

// 获取类型颜色
const getTypeColor = (type) => {
    const colors = {
        '重要公告': 'danger',
        '一般通知': 'primary',
        '活动通知': 'success'
    }
    return colors[type] || ''
}

// 获取状态颜色
const getStatusColor = (status) => {
    const colors = {
        '已发布': 'success',
        '草稿': 'warning',
        '已过期': 'info'
    }
    return colors[status] || ''
}

// 处理文件上传
const handleFileChange = (file) => {
    console.log('文件上传:', file)
}

// 添加公告
const addNotification = async () => {
    if (!formRef.value) return
    
    try {
        await formRef.value.validate()
        submitting.value = true
        
        // 模拟API调用延迟
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        const newNotif = {
            id: Date.now(),
            ...newNotification.value,
            publishDate: new Date().toISOString().slice(0, 19).replace('T', ' '),
            status: '已发布',
            views: 0
        }
        
        notifications.value.push(newNotif)
        showAddDialog.value = false
        ElMessage.success('发布成功')
        
        // 重置表单
        newNotification.value = {
            title: '',
            type: '一般通知',
            author: '',
            content: '',
            expireDate: ''
        }
    } catch (error) {
        console.error(error)
        ElMessage.error('请填写正确的信息')
    } finally {
        submitting.value = false
    }
}

// 保存为草稿
const saveAsDraft = async () => {
    if (!formRef.value) return
    
    try {
        await formRef.value.validate()
        submitting.value = true
        
        // 模拟API调用延迟
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        const newNotif = {
            id: Date.now(),
            ...newNotification.value,
            publishDate: null,
            status: '草稿',
            views: 0
        }
        
        notifications.value.push(newNotif)
        showAddDialog.value = false
        ElMessage.success('草稿保存成功')
        
        // 重置表单
        newNotification.value = {
            title: '',
            type: '一般通知',
            author: '',
            content: '',
            expireDate: ''
        }
    } catch (error) {
        console.error(error)
        ElMessage.error('请填写正确的信息')
    } finally {
        submitting.value = false
    }
}

// 编辑公告
const editNotificationHandler = (row) => {
    editNotification.value = { ...row }
    showEditDialog.value = true
}

// 更新公告
const updateNotification = async () => {
    if (!editFormRef.value) return
    
    try {
        await editFormRef.value.validate()
        submitting.value = true
        
        // 模拟API调用延迟
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        const index = notifications.value.findIndex(n => n.id === editNotification.value.id)
        if (index !== -1) {
            notifications.value[index] = { ...editNotification.value }
        }
        
        showEditDialog.value = false
        ElMessage.success('修改成功')
        
        // 重置编辑表单
        editNotification.value = {
            id: null,
            title: '',
            type: '',
            author: '',
            content: '',
            expireDate: ''
        }
    } catch (error) {
        console.error(error)
        ElMessage.error('请填写正确的信息')
    } finally {
        submitting.value = false
    }
}

// 发布公告
const publishNotification = (row) => {
    ElMessageBox.confirm(
        `确定要发布公告 "${row.title}" 吗？`,
        '确认发布',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info'
        }
    ).then(() => {
        const index = notifications.value.findIndex(n => n.id === row.id)
        if (index !== -1) {
            notifications.value[index].status = '已发布'
            notifications.value[index].publishDate = new Date().toISOString().slice(0, 19).replace('T', ' ')
        }
        ElMessage.success('发布成功')
    })
}

// 删除公告
const deleteNotification = (row) => {
    ElMessageBox.confirm(
        `确定要删除公告 "${row.title}" 吗？`,
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(() => {
        const index = notifications.value.findIndex(n => n.id === row.id)
        if (index !== -1) {
            notifications.value.splice(index, 1)
        }
        ElMessage.success('删除成功')
    })
}

// 查看公告
const viewNotification = (row) => {
    viewNotificationData.value = row
    showViewDialog.value = true
}

onMounted(() => {
    loading.value = true
    // 模拟加载延迟
    setTimeout(() => {
        loading.value = false
    }, 1000)
})
</script>

<style scoped>
.notifications-container {
    animation: fadeIn 0.5s ease-out;
}

.page-header {
    margin-bottom: var(--spacing-xl);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-lg);
}

.title-section {
    flex: 1;
}

.page-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin: 0 0 var(--spacing-sm) 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
}

.title-icon {
    font-size: 1.5rem;
    color: var(--primary-color);
}

.page-subtitle {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.add-button {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    font-weight: 500;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.stats-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.stat-card {
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
    cursor: pointer;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.stat-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-md);
}

.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
}

.stat-icon.total {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
}

.stat-icon.important {
    background: linear-gradient(135deg, var(--danger-color), #f87171);
}

.stat-icon.active {
    background: linear-gradient(135deg, var(--success-color), #34d399);
}

.stat-icon.draft {
    background: linear-gradient(135deg, var(--warning-color), #fbbf24);
}

.stat-info {
    flex: 1;
}

.stat-number {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.stat-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-top: var(--spacing-xs);
}

.table-card {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: var(--text-primary);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.search-input {
    width: 250px;
}

.status-filter,
.type-filter {
    width: 120px;
}

.notifications-table {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.title-cell {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.notification-icon {
    color: var(--primary-color);
    font-size: 1.2rem;
}

.notification-icon.important {
    color: var(--danger-color);
}

.title-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.title-text {
    font-weight: 500;
    color: var(--text-primary);
}

.important-tag {
    font-size: 0.7rem;
    padding: 2px 6px;
}

.type-tag {
    border-radius: var(--radius-md);
    font-weight: 500;
}

.author-text {
    font-weight: 500;
    color: var(--text-primary);
}

.date-text {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.status-tag {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    border-radius: var(--radius-md);
    font-weight: 500;
}

.status-icon {
    font-size: 0.875rem;
}

.views-count {
    font-weight: 600;
    color: var(--primary-color);
    font-size: 1.1rem;
}

.action-buttons {
    display: flex;
    gap: var(--spacing-sm);
}

.action-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
}

.action-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.add-dialog,
.edit-dialog,
.view-dialog {
    border-radius: var(--radius-xl);
}

.notification-form {
    padding: var(--spacing-lg) 0;
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
}

/* 公告详情样式 */
.notification-detail {
    padding: var(--spacing-lg) 0;
}

.detail-header {
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

.detail-title {
    margin: 0 0 var(--spacing-md) 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

.detail-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.meta-text {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.detail-content {
    line-height: 1.6;
    color: var(--text-primary);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-md);
    }
    
    .stats-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }
    
    .card-header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-md);
    }
    
    .header-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .search-input,
    .status-filter,
    .type-filter {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .stats-cards {
        grid-template-columns: 1fr;
    }
    
    .page-title {
        font-size: 1.5rem;
    }
    
    .stat-content {
        padding: var(--spacing-sm);
    }
    
    .stat-icon {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }
    
    .stat-number {
        font-size: 1.5rem;
    }
}
</style>
